<template>
  <div>
      <CityHeader></CityHeader>
      <city-search :cities="cities"></city-search>
      <CityList :cities="cities" :hot="hotCities" :letter="letter"></CityList>
      <CityAlphabet :cities="cities" @change="handleLetterChange"></CityAlphabet>
  </div>

</template>

<script>
    import CityHeader from "../components/city/Header";
    import CitySearch from "../components/city/Search";
    import CityList from "../components/city/List";
    import CityAlphabet from "../components/city/Alphabet"
    import axios from 'axios'
    export default {
        name: "city",
        components: {CityAlphabet, CityList, CitySearch, CityHeader},
    data () {
        return {
            cities: {},
            hotCities: [],
            letter: ''
        }
    },
    methods:{
      getCityInfo(){
          axios.get('/cityinfo.json')
              .then(this. getCitiesInfoSucc)
      },
      getCitiesInfoSucc(res){
          res=res.data
          if(res.ret && res.data){
              const data=res.data
              this.cities=data.cities
              this.hotCities=data.hotCities
          }
      },
      handleLetterChange(letter){
          //console.log(this.letter)
          this.letter=letter
      }
    },
    mounted() {
           this.getCityInfo()
    }
    }
</script>

<style scoped>

</style>
